<template>
	<!-- 添加 mask-click 属性以支持遮罩点击关闭 -->
	<uni-popup ref="passwordPopup" type="bottom" :mask-click="true" @maskClick="closeModal">
		<view class="password-modal">
			<view class="box">
				<template v-if="option==0">
					<view class="filter-header">
						<view class="filter-title">请选择收款方式</view>
						<view class="filter-close" @click="closeModal">
							<text>X</text>
						</view>
					</view>
					<view class="txt">
						<radio-group @change="radioChange">
							<view v-for="(item,index) in list" :key="index" @click="selectItem(item.name)"
								class="pay-item" v-if="item.isdsswitch == 1">
								<view class="collect-money">
									<view class="pay-info">
										<image class="pay-image" :src="'/static/payImg/' + payImg[index]"></image>
										<text class="pay-channel">{{item.name}}</text>
									</view>
									<view>
										<!-- 单选按钮 -->
										<view class="radio-box">
											<radio class="radio" color="#FFA500" :value="item.name"
												:checked="item.checked" />
										</view>
									</view>
								</view>
							</view>
						</radio-group>
					</view>
					<view class="foot">
						<view class="cancel" @click="closeModal">取消</view>
						<view class="true" @click="confirmChange">下一步</view>
					</view>
				</template>
			</view>
		</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		props: {
			option: {
				type: String,
				default: "0",
			},
			pointOut: String,
			list: {
				type: Array,
				default: () => [],
			}
		},
		data() {
			return {
				payImg: ['/yinghangkazhuangzhang.png', '/weixin.png', '/zhifubao.png', '/yunshanfu.png',
					'/shuzirenmingbi.png', '/dingding.png'
				],
				internalList: [] // 添加内部状态管理
			};
		},
		watch: {
			// 监听父组件传入的list变化
			list: {
				immediate: true,
				handler(newVal) {
					this.internalList = JSON.parse(JSON.stringify(newVal));
				}
			}
		},
		methods: {
			// 打开弹窗（供父组件调用）
			open() {
				this.$refs.passwordPopup.open();
			},

			// 关闭弹窗
			closeModal() {
				this.$refs.passwordPopup.close();
				this.$emit('close');
			},

			// 修改后的selectItem方法
			selectItem(name) {
				this.internalList = this.internalList.map(item => ({
					...item,
					checked: item.name === name
				}));

				// 通知父组件更新选中状态
				this.$emit('modifyList', this.internalList);

				// 触发radioChange事件
				this.radioChange({
					detail: {
						value: name
					}
				});
			},

			// 确认选择
			confirmChange() {
				const selected = this.internalList.find(item => item.checked);
				if (!selected) {
					uni.showToast({
						title: '请选择收款方式',
						icon: 'none'
					});
					return;
				}

				// 将选中的数据和整个列表传递给父组件
				this.$emit('confirm', {
					selected,
					list: this.internalList
				});
			},
			// 原始change事件
			radioChange(e) {
				console.log('当前选中:', e.detail.value);
				console.log(this.internalList)
				// 业务逻辑...
			}

		}
	};
</script>

<style scoped>
	/* 弹窗样式 - 优化版 */
	.password-modal {
		/* width: 85vw;
		max-width: 650rpx; */
		background: linear-gradient(135deg, #f8f9fd 0%, #ffffff 100%);
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.15);
		border: 1rpx solid #e8ebf5;
	}

	/* 弹窗头部 */
	.filter-header {
		padding: 40rpx 0 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: sticky;
		top: 0;
		background: white;
		z-index: 10;
		/* border-bottom: 1rpx solid #e0e0e0; */
	}

	.filter-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #2c3e50;
	}

	.filter-close {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		/* background: #f5f7fa; */
		color: #7f8c8d;
		font-size: 36rpx;
		position: absolute;
		right: 10rpx;
	}

	.box {
		background-color: #ffffff;
	}

	.title {
		background-color: #f7de7a;
		display: flex;
		justify-content: center;
		padding: 10rpx 0;
	}

	.txt {
		padding: 20rpx 20rpx;
	}

	.foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 30rpx;
	}

	.cancel {
		width: 45%;
		background-color: #d4d4d4;
		padding: 15rpx 0;
		border-radius: 20rpx;
		text-align: center;
		color: #484848;
	}

	.true {
		width: 45%;
		background-color: #ffc905;
		padding: 15rpx 0;
		border-radius: 10rpx;
		text-align: center;
		color: #484848;
	}

	/* 支付渠道 */
	.collect-money {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f0f0f0;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
	}

	.pay-item {
		margin-bottom: 20rpx;
	}

	.pay-info {
		display: flex;
		align-items: center;
	}

	.pay-image {
		width: 50rpx;
		height: 50rpx;
	}

	.pay-channel {
		margin-left: 20rpx;
	}

	.radio-box {}

	.radio {
		transform: scale(0.7);
	}
</style>